<template>
	<view class="forum-list" :class="config.style">
		<view class="blank" v-if="params.style != 1 && params.rank == 1"></view>
		<view class="header">
			<text class="title">{{params.title}}</text>
			<text class="more" @click="goToMoreLink()">查看更多</text>
		</view>   
		<view class="list" :class="params.rank ? 'rank'+params.rank:'rank0'">
			<view :class="params.style ? 'style'+params.style:'style0'">
				<view class="item" v-for="(item,index) in params.list" :key="index" @click="goToDetailLink(item.id)">
					<view class="content">
						<view class="cover" >
						    <image :style="{backgroundImage:'url('+item.cover_400+')'}" class="cover-img"></image>
						</view>
						<view class="info">
							<view class="communityname">
								<view class="title text-ellipsis-2">{{item.title}}</view>
								<view class="memberdynamic">
									<text class="test">{{item.member_total}}成员</text>
									<text>{{item.post_total}}动态</text> 
								</view>
							</view>
							<view class="headPortraits" v-if="params.style != 0 && params.rank == 1">
								<view class="manager-avatar-crown" ></view>
								<image class="image" mode="widthFix" :src="item.manager_user_info.avatar" @error="imageError"></image>
							</view>
							<view class="description text-ellipsis" v-if="params.style != 1 && params.rank == 1">{{item.description}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ForumList',
		props: {
			title: {
				type: String,
				default: '社群列表'
			},
			type: {
				type: String,
				default: 'forum_list',
			},
			params: {
				type: Object,
				default: {},
			},
			config: {
				type: Object,
				default: {},
			},
		},
		data() {
			return {
				
			}
		},
		created() {
			//console.log(JSON.stringify(this.params))
			this.getLinkMoreParams();
			// console.log(this.config)
		},
		methods: {
			/**
			 * 获取链接参数
			 */
			getLinkMoreParams: function(){
				let linkMoreParams = {
					category_id : this.params.category_id,
					order_field : this.params.order_field,
					order_type: this.params.order_type,
				}
				//console.log(linkParams);
				this.linkMoreParams = linkMoreParams
			},
			/**
			 * 路由至社群列表页面
			 */
			goToMoreLink: function(){
				let params = this.linkMoreParams
				let urlParams = this.util.urlEncode(params)

				// #ifdef MP
				uni.showModal({
				    title: '提示',
				    content: '小程序端暂不支持该模块',
					showCancel: false,
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
				        }
				    }
				});
				/*
				let url = '../../../muu_forum/pages/forum/lists?' + urlParams
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
				*/
				// #endif
				
				// #ifdef H5
				// H5端跳转URL
				let base_url = this.util.url('entry/site/h5',{
					'm' : 'muu_forum',
				});
				let url = base_url + '#/muu_forum/pages/forum/lists?source=muu_classroom&' + urlParams
				console.log(url)
				window.location.href = url
				// #endif
			},
			
			/**
			 * 跳转至社群详情页
			 * @param {Object} id
			 */
			goToDetailLink: function(id){
				let urlParams = 'id='+id
				// #ifdef MP
				uni.showModal({
				    title: '提示',
				    content: '小程序端暂不支持该模块',
					showCancel: false,
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
				        }
				    }
				});
				/*
				let url = '../../../muu_forum/pages/goods/detail?id=' + id
				console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
				*/
				// #endif
				
				// #ifdef H5
				// H5端跳转URL
				let base_url = this.util.url('entry/site/h5',{
					'm' : 'muu_forum',
				});
				let url = base_url + '#/muu_forum/pages/forum/detail?source=muu_classroom&id=' + id
				console.log(url)
				window.location.href = url
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	.forum-list {
		margin: 10rpx;
		.header {
			display: flex;
			justify-content: space-between;
			padding: 10rpx;
			margin: 10rpx 0 0 0;
			.title {
				flex: 1;
				font-size: 34rpx;
				font-weight: 700;
				color: #000;
			}
			.more {
				color: #999;
				font-size: 24rpx;
				line-height: 44rpx;
			}
		}
		.test::after{
				content: '|';
				display: inline-block;
				margin: 0 10rpx;
			}
		.blank{
			width: 100%;
			height: 20rpx;
			background-color:#f8f8f8 ;
			margin-top: -20rpx;
		}
		/*横排*/
		.list.rank0 {
			 
			.item{
				box-sizing:border-box;
				width: 50%;
				padding: 10rpx;
			}
			.style-category{
				display: flex;
				flex-wrap: wrap;
				.item{
					display: block;
					width: 100%;
					height: 145rpx;
					// margin: 0 40rpx;
					border-bottom: 2rpx solid #FAFAFA;
					.content{
						margin-top: 29rpx;
						.cover{
							display: inline-block;
							width:87rpx ;
							height: 87rpx;
							.cover-img{
								width: 87rpx;
								height: 87rpx;
								border-radius: 7rpx;
								background-position: center center;
								background-size: cover;
								background-repeat: no-repeat;
							}
						}
						.info{
							display: inline-block;
							vertical-align: top;
							.communityname{
								margin-left: 18rpx;
								.title{
									display: inline-block;
									font-size:28rpx;
									font-weight: bold;
									color: #222;
									margin:4rpx 0 8rpx;
									max-width: 300rpx;
									height: 38rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap !important;
								}
								.memberdynamic{
									font-size:24rpx;
									color: #777;
									font-weight: bold;
								}
								
							}
						}
					}
				}
			}
			/*小图*/
			.style0{
				display: flex;
				flex-flow: wrap;
				justify-content: space-between;
				width: 100%;
				.item {
					width: 50%;
					.content { 
						margin: 10rpx 0; 
						display: block;
						.cover {
							border-radius: 10rpx;
							overflow: hidden;
							width: 350rpx;
							height: 350rpx;
							.cover-img {
								width:100%;
								height: 100%;
								display: block;
								position: relative;
								border-radius: 10rpx;
								background-position: center center;
								background-size: cover;
                                background-repeat: no-repeat;
							}
						}
						.info {
							.title {
								margin-top: 26rpx;
								font-size: 32rpx;
								color: #222;
								font-weight: 400;
								height: 72rpx;
								line-height: 36rpx;
								height:36rpx ;
							}
							.description {
								color: #999;
								font-size: 24rpx;
								
							}
							.memberdynamic{
								font-size: 24rpx;
								font-weight: 400;
								color: #777;
								margin-top: 20rpx;
							}
							.price {
								margin-top: 10rpx;
								font-size: 26rpx; 
							}
							
						}
					}
				}
			}
		}
		/*竖排*/
		.list.rank1 {
			/*小图*/
			.style0{
				display: flex;
				flex-wrap: wrap;
				.item {
					width: 100%;
					.content {
						padding: 10rpx;
						display: flex;
						flex-wrap: wrap;
						.cover {
							width: 142rpx;
							height: 142rpx;
							border-radius: 10rpx;
							overflow: hidden;
							position: relative;
							margin: 10rpx;
							margin-left: 0;
							.cover-img {
								width: 142rpx;
								height: 142rpx;
								display: block;
								border-radius: 10rpx;
								background-position: center center;
								background-size: cover;
								background-repeat: no-repeat;
							}
							
						}
						.info {
							padding-left: 10rpx;
							margin: 20rpx 20rpx 0 0;
							flex: 1;
							.title {
								font-size: 32rpx;
								color: #222;
								font-weight: 600;
								height: 36rpx;
								line-height: 36rpx;
							}
							.memberdynamic{
								font-size: 24rpx;
								font-weight: 400;
								color: #777777;
								margin: 12rpx 0;
							}
							.description {
								font-size: 26rpx;
								color: #8e8e8e;
							}
							.price {
								margin-top: 10rpx;
								font-size: 26rpx;
							}
						}
					}
				}
			}
			/*竖排大图*/ 
			.style1{
				width: 100%;
					.item{
						max-width: 100%;
						.content{
							margin: 20rpx 0;
							padding: 10rpx 20rpx;
							
							.cover{
								width: 100%;
								height: 403rpx;
								display: block;
								.cover-img{
									width: 100%;
									height: 403rpx;
									border-radius: 7rpx;
									background-position: center center;
									background-size: cover;
									background-repeat: no-repeat;
								}
							}
							.info{
								width: 100%;
								padding: 0;
								.communityname{
									width: 80%;
									display: inline-block;
									.title{
									color: #222;
									font-size: 32rpx;
									font-weight: 400;
									line-height: 32rpx;
									margin-top: 23rpx;
									height: 32rpx;
								}
								.memberdynamic{
									font-size: 24rpx;
									font-weight: 400;
									color: #777;
									margin: 20rpx 0 0;
								}
								}
								.headPortraits{
									display: inline-block;
									width: 20%;
									text-align: right;
									position: relative;
									.manager-avatar-crown{
										display: block;
										background-image: url(../../../static/images/crown@2x.png);
										background-size: 36rpx 22rpx;
										width: 36rpx;
										height: 22rpx;
										position: absolute;
										top: -20rpx;
										right: 11%;
										margin-left: -18rpx;
									}
									.image{
									width: 60rpx;
									height: 60rpx;
									border-radius: 50%;
									border: 2rpx solid #FFDC00;
									}
									
								}
							}
						}
					}
			}
		}
	}
	
	/*页面风格设计*/
	.Blue {
		.price {
			color: $Blue;
		}
	}
	.Green {
		.price {
			color: $Green;
		}
	}
	.LightRed {
		.price {
			color: $LightRed;
		}
	}
	.Orange {
		.price {
			color: $Orange;
		}
	}
	.LightPink {
		.price {
			color: $LightPink;
		}
	}
	.Magenta {
		.price {
			color: $Magenta;
		}
	}
</style>
